<!--
 * @Author: chenr 526963089@qq.com
 * @Date: 2023-02-15 16:26:07
 * @LastEditors: chenr 526963089@qq.com
 * @LastEditTime: 2023-02-17 17:34:58
 * @FilePath: /education-webs/src/src-portal/layouts/Basic/index.vue
 * @Description: 
-->
<template>
  <a-layout class="layout-basic">
    <a-layout-header class="header">
      <a-row type="flex" justify="flex-start" :gutter="[16, 16]" style="flex-wrap: nowrap">
        <a-col>
          <Logo color="#fff" title="门户" />
        </a-col>
        <a-col style="flex: 1; width: 100%; overflow: hidden">
          <Menus :data-source="addRouters" theme="dark" />
        </a-col>
        <a-col>
          <a-space style="flex-wrap: nowrap">
            <a-divider type="vertical" />
            <AvatarDropdown></AvatarDropdown>
          </a-space>
        </a-col>
      </a-row>
    </a-layout-header>
    <a-layout-content class="content">
      <router-view></router-view>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Logo from './components/Logo.vue';
import Menus from '@/components/Menus/index.vue';
import AvatarDropdown from './components/AvatarDropdown.vue';
import { useRouterStore } from '@portal/stores/async-routers';
const { addRouters } = useRouterStore();
</script>

<style lang="less" scoped>
.layout-basic {
  .header {
    background-color: #001528;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .content {
    margin: 24px 16px;
    padding: 24px;
    background: #fff;
  }
}
</style>
